<template>
 <div style="padding:10px;height:95vh;overflow-y:auto;width:100%;">
    <div style="width:100%;text-align:left">
        <el-input 
            placeholder="请输入标题..."
            v-model="form.title" 
            :maxlength="36" 
            :minlength="5"
            style="max-width:980px"
            show-word-limit>
            <template slot="prepend">
                <span style="color:red">*</span>
                &nbsp;活动标题
            </template>
        </el-input>
    </div>
    <!--  文章内容 -->
    <ActiveTextVue  v-model='form.content' @input='contentChange'></ActiveTextVue>
    <!-- 文章描述 -->
    <div style="width:100%;text-align:left;">
        <el-input 
            placeholder="请输入活动描述(最多256个字)"
            :maxlength="256"
            show-word-limit
            v-model="form.description"
            style="max-width:980px;margin-top:20px;"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 7}"
        >
        </el-input>
        <div style="width:100%;text-align:right;">
            <el-button style="margin-right:18px;margin-top:5px;" @click="extract">一键提取</el-button>
        </div>
    </div>
    <div style="display:flex;flex-wrap:wrap">
        <div class="pitem">
            <div class="item">
                地址&nbsp;<span style="color:red">*</span>
            </div>
            <el-input class="inp" placeholder="请输入活动地址" v-model="form.address"></el-input>
        </div>
        <div class="pitem">
            <div class="item">
                分数&nbsp;<span style="color:red">*</span>
            </div>
            <el-input class="inp" placeholder="请输入活动分数" v-model="form.score"></el-input>
        </div>
        <div class="pitem">
            <div class="item">
                参与人数
            </div>
            <el-input class="inp" placeholder="请输入参与人数（默认为全部）" v-model.number.trim="form.peopleCount"></el-input>
        </div>
        <div class="pitem">
            <div class="item">
                院系
            </div>
            <el-input class="inp" placeholder="参与院系（多个院系使用 ”,“ 隔开）" v-model.number.trim="form.department"></el-input>
        </div>
        <div class="pitem">
            <div class="item">
                报名时间&nbsp;<span style="color:red">*</span>
            </div>
            <el-date-picker
                class="inp"
                v-model="form.createTime"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
        </div>
        <div class="pitem">
            <div class="item">
                截止时间&nbsp;<span style="color:red">*</span>
            </div>
            <el-date-picker
                class="inp"
                v-model="form.deadTime"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
        </div>
        <div class="pitem">
            <div class="item">
               分数类型
            </div>
            <el-checkbox-group v-model="grade" style="line-height:32px;">
                <el-checkbox v-for="item in grades" :key="item.id" :label="item.label">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="pitem">
            <div class="item">
                活动等级 &nbsp;<span style="color:red">*</span>
            </div>
            <el-radio-group v-model="form.activeType" style="line-height:32px;">
                <el-radio v-for="type in activeTypes" :key="type.id" :label="type.id">{{ type.label }}</el-radio>
            </el-radio-group>
        </div>
    </div>
    <div style="width:100%;text-align:right;">
        <el-button type="success" @click="submit(0)">提交</el-button>
        <el-button type="primary" style="margin-right:18px;" @click="submit(4)">暂存</el-button>
    </div>
 </div>

</template>

<script>
import ActiveTextVue from '../../components/server/ActiveText.vue'
import request from '@/util/request'

export default {
    data(){
        return{
            form:{
                title:'',
                content:'',
                description:'',
                createTime:null,
                deadTime:null,
                peopleCount:null,
                activeType:null,
                address:'',
                score:null,
                department: '',
                secondScore: 0,
                educationScore: 0,
                laborScore: 0,
                status:null
            },
            grade:[],
            activeTypes:[
                {id:0,label:'院级'},
                {id:1,label:'校级'},
                {id:2,label:'社团'},
            ],
            grades:[
                {id:0,label:'劳动分'},
                {id:1,label:'德育分'},
                {id:2,label:'第二课堂分'},
            ],
            isType:false
        }
    },
    components:{ActiveTextVue},
    methods:{
        contentChange(data) {
            this.form.content = data
        },
        extract(){
            var parser = new DOMParser();  
            var doc = parser.parseFromString(this.form.content, "text/html");  
            this.form.description =  (doc.body.textContent || doc.body.innerText || "").substring(0,256).replace(/\s+/g, ' ').trim();
        },
        submit(status){
            this.grade.forEach(item=>{
                if('德育分'===item){
                    this.form.educationScore=1
                }else if('劳动分'===item){
                    this.form.laborScore=1
                }else if('第二课堂分'===item){
                    this.form.secondScore =1
                }
                
            })
            console.log(this.form);

            this.form.status=status
            request.post('/admin/active/insert',this.form).then((res) => {
                this.$notify.success('添加成功')
                this.reset()
            })
            .catch(err =>{
                console.log('错误信息：',err.message)
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        },
        reset(){
            this.grade = []
            this.form={
                title:'',
                content:'',
                description:'',
                createTime:null,
                deadTime:null,
                peopleCount:null,
                activeType:null,
                address:'',
                score:null,
                department: '',
                secondScore: 0,
                educationScore: 0,
                laborScore: 0,
                status:null
            }
        }
    }
}
</script>

<style scoped>
body,html{
    background:#eee;
}
.inp{
    width:240px;
}
.item{
    width: 100px;
    margin-right: 10px;
    text-align: right;
    line-height: 32px;
}
.pitem{
    display: flex;
    margin-bottom: 20px;
    width: 50%;
}
</style>